<template>
	<!-- 农家乐预定信息 -->
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				<el-input v-model="input" placeholder="请输入内容" clearable style="margin-right: 10px;" />
				<el-button type="primary" icon="el-icon-search" @click="getReserveAll"
					style="margin-right: 10px;">搜索</el-button>
			</div>
		</div>
		<el-table :data="reservaData" style="width: 100%">
			<el-table-column label="编号" width="200">
				<template slot-scope="scope">
					<span size="medium">{{ scope.row.reserveNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="店名" width="200">
				<template slot-scope="scope">
					<span>{{ scope.row.houseName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="预定人姓名" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.reserveName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="电话号码" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.phone }}</span>
				</template>
			</el-table-column>
			<el-table-column label="入住时间" width="200">
				<template slot-scope="scope">
					<span>{{ scope.row.arrivalTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="离店时间" width="200">
				<template slot-scope="scope">
					<span>{{ scope.row.checkoutTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="支付状态" width="150">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.payStatus === 0" type="danger">未支付</el-tag>
					<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
					<el-tag v-if="scope.row.payStatus === 2" type="success">已退款</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="150">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.reserveStatus === 0" type="danger">预定申请</el-tag>
					<el-tag v-if="scope.row.reserveStatus === 1" type="success">已接受</el-tag>
					<el-tag v-if="scope.row.reserveStatus === 2" type="warning">申请取消预定</el-tag>
					<el-tag v-if="scope.row.reserveStatus === 3" type="warning">用户取消预定</el-tag>
					<el-tag v-if="scope.row.reserveStatus === 4" type="warning">取消预定</el-tag>
					<el-tag v-if="scope.row.reserveStatus === 5" type="success">已完成交易</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-dropdown style="margin-right: 5px;" trigger="click"
						v-if="scope.row.reserveStatus != 3 && scope.row.reserveStatus != 5">
						<el-button type="primary" size="mini">
							操作<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item style="display: flex;flex-direction: column;">
								<el-button type="primary" size="mini" v-if="scope.row.reserveStatus === 0 && scope.row.payStatus === 1
								|| scope.row.reserveStatus === 0 && scope.row.payStatus === 0" @click="takeInReserva(scope.row)"
									style="margin: 0 0 5px 10px;">接受预定</el-button>
								<el-button type="primary" size="mini" v-if="scope.row.reserveStatus === 1
								&& scope.row.payStatus === 1 || scope.row.reserveStatus === 1
								&& scope.row.payStatus === 0 " @click="cancelReserva(scope.row)" 
								style="margin: 0 0 5px 10px;">取消预定</el-button>
								<el-button type="primary" size="mini" v-if="scope.row.reserveStatus === 0
								&& scope.row.payStatus === 1 || scope.row.reserveStatus === 0
								&& scope.row.payStatus === 0 " @click="cancelReservaAdmin(scope.row)"
									style="margin: 0 0 5px 10px;">取消申请</el-button>
								<el-button type="primary" size="mini" v-if="scope.row.reserveStatus === 2
								&& scope.row.payStatus === 1" @click="cancelReservaUser(scope.row)"
									style="margin-bottom: 5px;">确认取消</el-button>
								<el-button type="primary" size="mini"
									v-if="scope.row.payStatus === 1 && scope.row.reserveStatus != 5"
									@click="handleRefund(scope.row)" style="margin-bottom: 5px;">退款</el-button>
								<el-button type="primary" size="mini"
									v-if="scope.row.payStatus === 1 && scope.row.reserveStatus === 1"
									@click="CloseTheDeal(scope.row)" style="margin-bottom: 5px;">完成预定</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-button type="danger" size="mini" icon="el-icon-delete"
						@click="handleDelete(scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import houseApi from "@/api/farmHouse.js"
	import reserveApi from "@/api/reserve.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,
				reservaData: [],
				input: ""
			}
		},
		methods: {
			async getReserveAll() {
				const res = await reserveApi.getReserveAll("/znFarmhouseReserve/getReserveAll", {
					input: this.input,
					createPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.reservaData = res.data.records;
					this.total = res.data.total;
				}
			},
			async handleRefund(row) { //退款
				const res = await reserveApi.postRefund("/Alipay/refundHouse?reserveNumber=" + row.reserveNumber);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '申请成功',
						message: '请留意资金是否成功退回',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '这是一条错误的提示消息'
					});
				}
			},
			async delReservat(row) { //删除预定
				const res = await reserveApi.delReservat("/znFarmhouseReserve/delReservat/" + row.reserveId);
				this.getReserveAll();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delReservat(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async takeInReserva(row) { //接受预定
				const res = await reserveApi.takeInReserva("/znFarmhouseReserve/takeInReserva?reserveId=" + row
					.reserveId);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
			async cancelReserva(row) { //接受后取消预订
				const res = await reserveApi.cancelReserva("/znFarmhouseReserve/cancelReserva?reserveId=" + row
					.reserveId);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '取消成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
			async cancelReservaAdmin(row) { //未接受时取消预订
				const res = await reserveApi.cancelReserva("/znFarmhouseReserve/AdminCancelReserve?reserveId=" + row
					.reserveId);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '取消成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
			async cancelReservaUser(row) { //确认用户取消预订
				const res = await reserveApi.cancelReserva("/znFarmhouseReserve/UserCancelReserve?reserveId=" + row
					.reserveId);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '取消成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
			async CloseTheDeal(row) { //完成交易
				const res = await reserveApi.CloseTheDeal("/znFarmhouseReserve/CloseTheDeal?reserveId=" + row
					.reserveId);
				if (res.code == 200) {
					this.getReserveAll();
					this.$notify({
						title: '已成功交易',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
		},
		created() {
			this.getReserveAll();
		}
	}
</script>

<style lang="scss" scoped>
	.main_content {
		height: 100%;

		.top_seach {
			height: 7%;
			position: relative;

			.btns {
				display: flex;
				position: absolute;
				left: 38%;
				top: 30%;
			}
		}

		.content_table {
			height: 83%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
			}

			.InfoBox {}
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(-50%);

			}
		}
	}
</style>